    <div class="row">
      <div class="col-12">
        <div class="d-flex justify-content-between align-items-center mb-4">
          <div>
            <h2 class="mb-1">工单详情</h2>
            <span class="text-muted" ng-if="$ctrl.ticket">工单号：{{ $ctrl.ticket.ticket_number }}</span>
          </div>
          <div>
            <button type="button" class="btn btn-outline-secondary me-2" ng-click="$ctrl.refresh()">
              <i class="fas fa-sync-alt"></i> 刷新
            </button>
            <button type="button" class="btn btn-secondary" ng-click="$ctrl.goBack()">
              <i class="fas fa-arrow-left"></i> 返回列表
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 加载状态 -->
    <div class="row" ng-if="$ctrl.isLoading">
      <div class="col-12 text-center">
        <div class="spinner-border" role="status">
          <span class="visually-hidden">加载中...</span>
        </div>
        <p class="mt-2">加载工单详情中...</p>
      </div>
    </div>

    <!-- 工单内容 -->
    <div ng-if="!$ctrl.isLoading && $ctrl.ticket">
      <!-- 工单基本信息 -->
      <div class="row mb-4">
        <div class="col-12">
          <div class="card">
            <div class="card-header">
              <div class="d-flex justify-content-between align-items-center">
                <h5 class="mb-0">{{ $ctrl.ticket.title }}</h5>
                <div>
                  <span class="badge me-2" ng-class="$ctrl.getStatusBadgeClass($ctrl.ticket.status)">
                    {{ $ctrl.ticket.status | translate }}
                  </span>
                  <span class="badge" ng-class="$ctrl.getPriorityBadgeClass($ctrl.ticket.priority)">
                    {{ $ctrl.ticket.priority | translate }}
                  </span>
                </div>
              </div>
            </div>
            <div class="card-body">
              <div class="row">
                <div class="col-md-6">
                  <p><strong>创建者：</strong> {{ $ctrl.ticket.user_name }} ({{ $ctrl.ticket.user_department }})</p>
                  <p><strong>创建时间：</strong> {{ $ctrl.ticket.created_at | date:'yyyy-MM-dd HH:mm:ss' }}</p>
                  <p><strong>类别：</strong> {{ $ctrl.ticket.category }}</p>
                  <p ng-if="$ctrl.ticket.support_staff_name"><strong>分配给：</strong> {{ $ctrl.ticket.support_staff_name }}</p>
                </div>
                <div class="col-md-6">
                  <p ng-if="$ctrl.ticket.due_date"><strong>预期完成：</strong> {{ $ctrl.ticket.due_date | date:'yyyy-MM-dd HH:mm:ss' }}</p>
                  <p ng-if="$ctrl.ticket.resolved_at"><strong>解决时间：</strong> {{ $ctrl.ticket.resolved_at | date:'yyyy-MM-dd HH:mm:ss' }}</p>
                  <p ng-if="$ctrl.ticket.verification_status !== 'none'">
                    <strong>验证状态：</strong> 
                    <span class="badge badge-info">{{ $ctrl.ticket.verification_status | translate }}</span>
                  </p>
                </div>
              </div>
              
              <div class="mt-3">
                <strong>问题描述：</strong>
                <div class="mt-2 p-3 bg-light rounded">
                  <div ng-bind-html="$ctrl.ticket.description | trustedHtml"></div>
                </div>
              </div>

              <div class="mt-3" ng-if="$ctrl.ticket.resolution">
                <strong>解决方案：</strong>
                <div class="mt-2 p-3 bg-light rounded">
                  <div ng-bind-html="$ctrl.ticket.resolution | trustedHtml"></div>
                </div>
              </div>

              <!-- 标签 -->
              <div class="mt-3" ng-if="$ctrl.ticket.tags && $ctrl.ticket.tags.length > 0">
                <strong>标签：</strong>
                <span ng-repeat="tag in $ctrl.ticket.tags" class="badge badge-secondary me-1" ng-style="{'background-color': tag.color}">
                  {{ tag.name }}
                </span>
              </div>

              <!-- 操作按钮 -->
              <div class="mt-4">
                <button type="button" class="btn btn-primary me-2" ng-if="$ctrl.canEdit" ng-click="$ctrl.startEditTicket()">
                  <i class="fas fa-edit"></i> 编辑工单
                </button>
                <button type="button" class="btn btn-success me-2" 
                        ng-if="$ctrl.canVerify && $ctrl.ticket.verification_status === 'pending'" 
                        ng-click="$ctrl.approveTicket()" ng-disabled="$ctrl.isVerifying">
                  <i class="fas fa-check"></i> 验证通过
                </button>
                <button type="button" class="btn btn-warning" 
                        ng-if="$ctrl.canVerify && $ctrl.ticket.verification_status === 'pending'" 
                        ng-click="$ctrl.rejectTicket()" ng-disabled="$ctrl.isVerifying">
                  <i class="fas fa-times"></i> 驳回验证
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Tabs 导航 -->
      <div class="row">
        <div class="col-12">
          <ul class="nav nav-tabs mb-4">
            <li class="nav-item">
              <a class="nav-link" ng-class="{ active: $ctrl.activeTab === 'comments' }" 
                 ng-click="$ctrl.setActiveTab('comments')">
                评论 ({{ $ctrl.comments.length }})
              </a>
            </li>
            <li class="nav-item" ng-if="$ctrl.canViewInternalNotes()">
              <a class="nav-link" ng-class="{ active: $ctrl.activeTab === 'internal_notes' }" 
                 ng-click="$ctrl.setActiveTab('internal_notes')">
                内部备注 ({{ $ctrl.internalNotes.length }})
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" ng-class="{ active: $ctrl.activeTab === 'logs' }" 
                 ng-click="$ctrl.setActiveTab('logs')">
                操作日志 ({{ $ctrl.logs.length }})
              </a>
            </li>
          </ul>
        </div>
      </div>

      <!-- Tab 内容：评论 -->
      <div class="row" ng-if="$ctrl.activeTab === 'comments'">
        <div class="col-12">
          <div class="card">
            <div class="card-header">
              <h6 class="mb-0">评论</h6>
            </div>
            <div class="card-body">
              <!-- 添加评论 -->
              <div class="mb-4">
                <textarea ng-model="$ctrl.newComment" 
                          kindeditor ke-options="$ctrl.editorOptions.comment"
                          placeholder="添加评论..."></textarea>
                <button type="button" class="btn btn-primary mt-2" ng-click="$ctrl.addComment()" 
                        ng-disabled="$ctrl.isAddingComment">
                  <span ng-if="$ctrl.isAddingComment">
                    <i class="fas fa-spinner fa-spin"></i> 添加中...
                  </span>
                  <span ng-if="!$ctrl.isAddingComment">
                    <i class="fas fa-comment"></i> 添加评论
                  </span>
                </button>
              </div>

              <!-- 评论列表 -->
              <div ng-if="$ctrl.comments.length === 0" class="text-muted text-center py-4">
                暂无评论
              </div>
              <div ng-repeat="comment in $ctrl.comments" class="border-bottom mb-3 pb-3">
                <div class="d-flex justify-content-between">
                  <strong>{{ comment.user_name }}</strong>
                  <small class="text-muted">{{ comment.created_at | date:'yyyy-MM-dd HH:mm:ss' }}</small>
                </div>
                <div class="mt-2" ng-bind-html="comment.comment_content | trustedHtml"></div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Tab 内容：内部备注 -->
      <div class="row" ng-if="$ctrl.activeTab === 'internal_notes' && $ctrl.canViewInternalNotes()">
        <div class="col-12">
          <div class="card">
            <div class="card-header">
              <h6 class="mb-0">内部备注</h6>
            </div>
            <div class="card-body">
              <!-- 添加内部备注 -->
              <div class="mb-4" ng-if="$ctrl.canAddInternalNote()">
                <div class="row">
                  <div class="col-md-6 mb-2">
                    <select class="form-control" ng-model="$ctrl.newInternalNote.note_type" ui-select2="{placeholder: '备注类型', allowClear: false}">
                      <option value="general">一般</option>
                      <option value="technical">技术</option>
                      <option value="management">管理</option>
                      <option value="urgent">紧急</option>
                    </select>
                  </div>
                  <div class="col-md-6 mb-2">
                    <select class="form-control" ng-model="$ctrl.newInternalNote.visibility" ui-select2="{placeholder: '可见性', allowClear: false}">
                      <option value="all_internal">所有内部人员可见</option>
                      <option value="support_only">仅支持人员可见</option>
                      <option value="admin_only" ng-if="$ctrl.userRole === 'administrator'">仅管理员可见</option>
                    </select>
                  </div>
                </div>
                <textarea ng-model="$ctrl.newInternalNote.note_content" 
                          kindeditor ke-options="$ctrl.editorOptions.internalNote"
                          placeholder="添加内部备注..."></textarea>
                <div class="form-check mb-2">
                  <input type="checkbox" class="form-check-input" ng-model="$ctrl.newInternalNote.is_pinned" id="pinNote">
                  <label class="form-check-label" for="pinNote">置顶显示</label>
                </div>
                <button type="button" class="btn btn-primary" ng-click="$ctrl.addInternalNote()" 
                        ng-disabled="$ctrl.isAddingInternalNote">
                  <span ng-if="$ctrl.isAddingInternalNote">
                    <i class="fas fa-spinner fa-spin"></i> 添加中...
                  </span>
                  <span ng-if="!$ctrl.isAddingInternalNote">
                    <i class="fas fa-sticky-note"></i> 添加内部备注
                  </span>
                </button>
              </div>

              <!-- 内部备注列表 -->
              <div ng-if="$ctrl.internalNotes.length === 0" class="text-muted text-center py-4">
                暂无内部备注
              </div>
              <div ng-repeat="note in $ctrl.internalNotes" class="border mb-3 p-3 rounded">
                <!-- 正常显示模式 -->
                <div ng-if="$ctrl.editingNote === null || $ctrl.editingNote.id !== note.id">
                  <div class="d-flex justify-content-between align-items-start mb-2">
                    <div>
                      <strong>{{ note.user_name }}</strong>
                      <span class="badge badge-sm ms-2" ng-class="{
                        'badge-info': note.note_type === 'general',
                        'badge-primary': note.note_type === 'technical',
                        'badge-warning': note.note_type === 'management',
                        'badge-danger': note.note_type === 'urgent'
                      }">{{ note.note_type | translate }}</span>
                      <span class="badge badge-secondary badge-sm ms-1" ng-if="note.is_pinned">置顶</span>
                      <span class="badge badge-light badge-sm ms-1">{{ note.visibility | translate }}</span>
                    </div>
                    <div class="d-flex">
                      <small class="text-muted me-3">{{ note.created_at | date:'yyyy-MM-dd HH:mm:ss' }}</small>
                      <div ng-if="$ctrl.canEditInternalNote(note)">
                        <button type="button" class="btn btn-sm btn-outline-primary me-1" 
                                ng-click="$ctrl.editInternalNote(note)">
                          <i class="fas fa-edit"></i>
                        </button>
                        <button type="button" class="btn btn-sm btn-outline-danger" 
                                ng-click="$ctrl.deleteInternalNote(note)">
                          <i class="fas fa-trash"></i>
                        </button>
                      </div>
                    </div>
                  </div>
                  <div class="mt-2" ng-bind-html="note.note_content | trustedHtml"></div>
                </div>

                <!-- 编辑模式 -->
                <div ng-if="$ctrl.editingNote && $ctrl.editingNote.id === note.id">
                  <div class="row mb-2">
                    <div class="col-md-6">
                      <select class="form-control" ng-model="$ctrl.editingNote.note_type" ui-select2="{placeholder: '备注类型', allowClear: false}">
                        <option value="general">一般</option>
                        <option value="technical">技术</option>
                        <option value="management">管理</option>
                        <option value="urgent">紧急</option>
                      </select>
                    </div>
                    <div class="col-md-6">
                      <select class="form-control" ng-model="$ctrl.editingNote.visibility" ui-select2="{placeholder: '可见性', allowClear: false}">
                        <option value="all_internal">所有内部人员可见</option>
                        <option value="support_only">仅支持人员可见</option>
                        <option value="admin_only" ng-if="$ctrl.userRole === 'administrator'">仅管理员可见</option>
                      </select>
                    </div>
                  </div>
                  <textarea ng-model="$ctrl.editingNote.note_content" 
                            kindeditor ke-options="$ctrl.editorOptions.internalNote"></textarea>
                  <div class="form-check mb-2">
                    <input type="checkbox" class="form-check-input" ng-model="$ctrl.editingNote.is_pinned" id="editPinNote">
                    <label class="form-check-label" for="editPinNote">置顶显示</label>
                  </div>
                  <div>
                    <button type="button" class="btn btn-sm btn-success me-2" ng-click="$ctrl.updateInternalNote()">
                      <i class="fas fa-save"></i> 保存
                    </button>
                    <button type="button" class="btn btn-sm btn-secondary" ng-click="$ctrl.cancelEditInternalNote()">
                      <i class="fas fa-times"></i> 取消
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Tab 内容：操作日志 -->
      <div class="row" ng-if="$ctrl.activeTab === 'logs'">
        <div class="col-12">
          <div class="card">
            <div class="card-header">
              <h6 class="mb-0">操作日志</h6>
            </div>
            <div class="card-body">
              <div ng-if="$ctrl.logs.length === 0" class="text-muted text-center py-4">
                暂无操作日志
              </div>
              <div ng-repeat="log in $ctrl.logs" class="border-bottom mb-3 pb-3">
                <div class="d-flex justify-content-between">
                  <div>
                    <strong>{{ log.user_name }}</strong>
                    <span class="badge badge-sm ms-2" ng-class="{
                      'badge-info': log.action_type === 'updated',
                      'badge-success': log.action_type === 'created' || log.action_type.includes('approved'),
                      'badge-warning': log.action_type.includes('assigned') || log.action_type.includes('rejected'),
                      'badge-danger': log.action_type === 'cancelled' || log.action_type === 'deleted'
                    }">{{ log.action_type | translate }}</span>
                  </div>
                  <small class="text-muted">{{ log.created_at | date:'yyyy-MM-dd HH:mm:ss' }}</small>
                </div>
                <div class="mt-2">{{ log.action_description }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 验证评论模态框 -->
      <div ng-if="$ctrl.canVerify && $ctrl.ticket.verification_status === 'pending'" class="mb-4">
        <div class="card border-warning">
          <div class="card-header bg-warning">
            <h6 class="mb-0 text-white">工单验证</h6>
          </div>
          <div class="card-body">
            <p>此工单需要您的验证确认。</p>
            <textarea ng-model="$ctrl.verificationComment" 
                      kindeditor ke-options="$ctrl.editorOptions.comment"
                      placeholder="验证意见（驳回时必填）..."></textarea>
            <div>
              <button type="button" class="btn btn-success me-2" ng-click="$ctrl.approveTicket()" 
                      ng-disabled="$ctrl.isVerifying">
                <span ng-if="$ctrl.isVerifying">
                  <i class="fas fa-spinner fa-spin"></i> 处理中...
                </span>
                <span ng-if="!$ctrl.isVerifying">
                  <i class="fas fa-check"></i> 验证通过
                </span>
              </button>
              <button type="button" class="btn btn-warning" ng-click="$ctrl.rejectTicket()" 
                      ng-disabled="$ctrl.isVerifying">
                <span ng-if="$ctrl.isVerifying">
                  <i class="fas fa-spinner fa-spin"></i> 处理中...
                </span>
                <span ng-if="!$ctrl.isVerifying">
                  <i class="fas fa-times"></i> 驳回验证
                </span>
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 工单编辑模态框 -->
      <div class="modal fade show" style="display: block;" ng-if="$ctrl.editingTicket">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">编辑工单</h5>
              <button type="button" class="close" ng-click="$ctrl.cancelTicketEdit()">
                <span>&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <form>
                <div class="row">
                  <div class="col-md-8 mb-3">
                    <label class="form-label">工单标题</label>
                    <input type="text" class="form-control" ng-model="$ctrl.editTicketData.title">
                  </div>
                  <div class="col-md-4 mb-3">
                    <label class="form-label">优先级</label>
                    <select class="form-control" ng-model="$ctrl.editTicketData.priority" ui-select2="{placeholder: '选择优先级', allowClear: false}">
                      <option value="low">低</option>
                      <option value="medium">中</option>
                      <option value="high">高</option>
                      <option value="urgent">紧急</option>
                    </select>
                  </div>
                </div>
                
                <div class="row">
                  <div class="col-md-6 mb-3">
                    <label class="form-label">状态</label>
                    <select class="form-control" ng-model="$ctrl.editTicketData.status" ui-select2="{placeholder: '选择状态', allowClear: false}">
                      <option value="pending">待处理</option>
                      <option value="in_progress">处理中</option>
                      <option value="resolved">已解决</option>
                      <option value="closed">已关闭</option>
                    </select>
                  </div>
                  <div class="col-md-6 mb-3">
                    <label class="form-label">类别</label>
                    <input type="text" class="form-control" ng-model="$ctrl.editTicketData.category">
                  </div>
                </div>

                <div class="mb-3">
                  <label class="form-label">问题描述</label>
                  <textarea ng-model="$ctrl.editTicketData.description" 
                            kindeditor ke-options="$ctrl.editorOptions.resolution"></textarea>
                </div>

                <div class="mb-3">
                  <label class="form-label">解决方案</label>
                  <textarea ng-model="$ctrl.editTicketData.resolution" 
                            kindeditor ke-options="$ctrl.editorOptions.resolution"
                            placeholder="请输入解决方案..."></textarea>
                </div>
              </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-primary" ng-click="$ctrl.saveTicketEdit()">
                <i class="fas fa-save"></i> 保存
              </button>
              <button type="button" class="btn btn-secondary" ng-click="$ctrl.cancelTicketEdit()">
                取消
              </button>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-backdrop fade show" ng-if="$ctrl.editingTicket" ng-click="$ctrl.cancelTicketEdit()"></div>
    </div>